<template>
	<div class="searchpage bg" ref="page">


		<div class="search_container">
			<input type="text" class="search-input" placeholder="请输入关键词进行搜索..." v-model="search_content"
				@input="hideHistory" />
			<recoderModal class="video" @result="getVoice"></recoderModal>
			<button class="search-btn" @click="closePage">关闭</button>
		</div>




		<div class="card" v-if="show_History">
			<div class="card_title">历史搜索</div>
			<div class="card_context" v-for="(item,index) in getHistory" @click="findPage(item)">
				<div class="delete_container">{{item}}
					<div class="delete_history" @click="deletefunction_history(item,$event)">x</div>
				</div>
			</div>
		</div>

		<div class="search_result card" v-if="this.search_content != ''">
			<div class="card_title">搜索结果</div>
			<div  class="search_result_everycon" v-if="filteredList.length==0">暂无查询结果,请换个词试试</div>
			
			<div class="search_result_everycon" v-for="(item,index) in filteredList" @click="goPage(item.path,item.name)">
				<div class="left_box">
					<img src="@/assets/icons/尖括号.png"></img>
					<div>{{item.name}}</div>
				</div>
				<div class="right_box">进入</div>
			</div>
		</div>

		<div class="card">
			<div class="card_title">大家都在搜</div>
			<div class="search_result_everycon" v-for="(item,index) in recommends" @click="goPage2(item.path,item.name)">
				<div class="left_box">
					
					<div class="all_search_index hot" v-if="item.type==0">HOT</div>
					<div class="all_search_index new" v-else-if="item.type==1">NEW</div>
					<div class="all_search_index new" v-else></div>
					<div class="all_search_content">{{item.name}}</div>
				</div>
				<div class="right_box">进入</div>
			</div>
		</div>






	</div>
</template>

<script>
	export default {
		name: "searchpage",
		data() {
			return {
				search_content: '',
				show_History: true,
				history:[],
				list: [ // 功能列表  
					{
						name: '问卷系统',
						path: '/survey'
					},
					{
						name: '建议投递',
						path: '/feedback' // 注意这里修正了原path值，以便不与"问卷系统"相同  
					},
					{
						name: '地址管理',
						path: '/address'
					},{
						name: '天气系统',
						path: '/forecast'
					},{
						name: '出售秸秆',
						path: '/mails'
					},{
						name: '回收秸秆',
						path: '/shopsetting'
					},{
						name: '排名中心',
						path: '/rank'
					},{
						name: '积分兑换',
						path: '/cart'
					},{
						name: '政策列表',
						path: '/policies'
					},{
						name: '求助',
						path: '/aichat'
					},
				],
				recommends: [
					{
						name: '大数据人工智能,智答您的问题',
						type: 0,
						path: '/aichat'
					},
					{
						name: '智慧天气预测,助您合理进行种植',
						type: 1,
						path: '/forecast'
					},
					{
						name: '智慧大比拼,问卷系统全新上线!!!',
						type: 0,
						path: '/survey'
					},
					{
						name: '益智类趣味小游戏等你挑战~',
						type: 1,
						path: '/game'
					},
					{
						name: '智慧站点设置',
						type: 2,
						path: '/daohang'
					}
				]
			};
		},
		computed: {
			// 计算属性来过滤列表  
			filteredList() {
				const lowerCaseQuery = this.search_content.trim().toLowerCase();
				return this.list.filter(item => {
					return item.name.toLowerCase().includes(lowerCaseQuery) && lowerCaseQuery != '';
				});
			},
			getHistory(){
				return JSON.parse(localStorage.getItem("seach_history"));
				this.$forceUpdate()
			},
		},
		methods: {
			goPage(path,name){
				this.$router.push(path);
				
				let searchs = JSON.parse(localStorage.getItem('seach_history')) || [];  
				    // 检查name是否已经存在于数组中  
				    let index = searchs.indexOf(name);  
				    // 如果存在，则将其移除并插入到数组的第一个位置  
				    if (index !== -1) {  
				      searchs.splice(index, 1); // 移除元素  
				      searchs.unshift(name); // 插入到数组的第一个位置  
				    } else {  
				      // 如果不存在，则直接插入到数组的最前面  
				      searchs.unshift(name);  
				    }  
				      
				    // 将更新后的数组存回localStorage  
				    localStorage.setItem('seach_history', JSON.stringify(searchs));
			},
			goPage2(path){
				this.$router.push(path);
			},
			closePage() {
				this.$router.push('/index');
			},
			getVoice(e) {
				this.search_content = e;
			},
			hideHistory() {
				this.show_History = false;
				if (this.search_content.trim() == '') {
					this.show_History = true;
				}
			},
			findPage(name){
				this.list.forEach((e)=>{
					if(e.name.includes(name)){
						this.$router.push(e.path);
					}
				})
			},
			deletefunction_history(name,event){
				event.stopPropagation();
				let searchs = JSON.parse(localStorage.getItem('seach_history')) || [];
				    // 检查name是否已经存在于数组中  
				    let index = searchs.indexOf(name);  
				    // 如果存在，则将其移除并插入到数组的第一个位置  
				    if (index !== -1) {  
				      searchs.splice(index, 1); // 移除元素  
				    } 
				    // 将更新后的数组存回localStorage  
				    localStorage.setItem('seach_history', JSON.stringify(searchs));
					this.$forceUpdate();
					location.reload();
			},
		}
	}
</script>
<style scoped>
	.searchpage {
		position: fixed;
		/* 固定定位，覆盖整个页面 */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 1.0);
		/* 黑色半透明背景 */
		z-index: 99999;
		/* 确保遮罩在最顶层 */

	}

	.search_container {
		display: flex;
		padding: 2vw;
		box-shadow: 0 0 25px #cac6c6;
	}

	.search_container input {
		flex: 1;
		border: 1px solid #efefef;
		padding: 2vw;
		border-radius: 20px;
	}

	.search-btn {
		width: 8vw;
		height: 8vw;
		border-radius: 1vw;
		background-color: #fff;
	}


	.tip {
		font-size: 24px;
	}

	.search_result {
		padding: 2vw;
	}

	.search_result_everycon {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 3vw;
		border-bottom: 1px solid #ededed;
	}

	.search_result_everycon img {
		width: 36px;
		height: 36px;
	}

	.all_search_index {
		font-size: 28px;
		margin-right: 10px;
		font-weight: bold;
		min-width: 75px;
	}
	
	.all_search_index.hot {
		color: #ff1111;
	}
	
	
	.all_search_index.new {
		font-size: 26px;
		color:  #6eed1e;
	}
	
	.all_search_content {
		font-size: 28px;
	}

	.left_box {
		display: flex;
		width: 84vw;
		align-items: center;
	}

	.right_box {
		width: 8vw;
		background-color: #ededed;
		padding: 2vw;
		border-radius: 20px;
	}
	
	
	.delete_container{
		position: relative;
	}
	.delete_history{
		position: absolute;
		right: -10px;
		top:-20px;
		margin:0;
		background: none;
		border:none;
	}
	
</style>